import React, { useState, useEffect, useRef } from 'react'
import { useNavigate, Outlet, useLocation } from 'react-router-dom'
import { Tabbar } from '@nutui/nutui-react'
import { Home } from '@nutui/icons-react'
const RouterOutlet = () => {
    const navigate = useNavigate()
    const location = useLocation()
    const [tabbarVal, setTabbarVal] = useState(0)
    const createRef = useRef(false)
    const [showTabbar, setShowTabbar] = useState(true)
    const navlist = [
        { id: 1, name: "首页", path: "/outlet/home" },
        { id: 2, name: "订单", path: "/outlet/article" },
        { id: 3, name: "消息", path: "/outlet/message" },
        { id: 4, name: "我的", path: "/outlet/MySelf" }
    ]
    useEffect(() => {
        if (createRef.current) {
            console.log(location.pathname, "路由变化了")
            let index = navlist.findIndex(item => item.path == location.pathname)
            if (index > -1) {
                setTabbarVal(index)
                setShowTabbar(true)
            } else {
                console.log("没有找到标签页相对应的路由")
                setShowTabbar(false)
            }
        } else {
            createRef.current = true
        }
    }, [location.pathname])
    return (
        <>
            <div style={{ height: '100vh' }}>
                <Outlet key={location.pathname}></Outlet>
            </div>
            {showTabbar &&
                <Tabbar
                    inactiveColor="#7d7e80"
                    activeColor="#1989fa"
                    value={tabbarVal}
                    fixed={true}
                >
                    {
                        navlist.map((item, index) => {
                            return (
                                <Tabbar.Item
                                    title={item.name}
                                    key={item.id}
                                    icon={<Home width={20} height={20} />}
                                    onClick={() => { navigate(item.path); setTabbarVal(index) }}
                                />
                            )
                        })
                    }
                </Tabbar>
            }
        </>
    )

}
export default RouterOutlet